<template>
    <div class="cswd-dnld">
        <div class="main">
            <div class="main-left">
                <div class="tabs">
                    <nuxt-link
                        class="tab"
                        :class="{ 'tab-active': tabCurent == 'jxhd' }"
                        to="/cswd/jxhd/1"
                    >
                        精选回答
                        <div class="line"></div>
                    </nuxt-link>
                    <nuxt-link
                        class="tab"
                        :class="{ 'tab-active': tabCurent == 'zjwd' }"
                        to="/cswd/zjwd/1"
                    >
                        专家问答
                        <div class="line"></div>
                    </nuxt-link>
                    <nuxt-link
                        class="tab"
                        :class="{ 'tab-active': tabCurent == 'dnld' }"
                        to="/cswd/dnld/1"
                    >
                        等你来答
                        <div class="line"></div>
                        <div v-show="messageCount.dengnilaida > 0" class="mark">
                            {{ messageCount.dengnilaida }}
                        </div>
                    </nuxt-link>
                </div>

                <div class="wd-list" v-loading="dataLoading">
                    <!-- 精选回答 -->
                    <template v-if="tabCurent == 'jxhd'">
                        <div class="sort-list">
                            <div
                                :class="{ sort: sort == 2 }"
                                @click="sortClick(2)"
                            >
                                最新
                            </div>
                            <div
                                :class="{ sort: sort == 1 }"
                                @click="sortClick(1)"
                            >
                                推荐
                            </div>
                        </div>
                        <div
                            v-for="(item, index) in problemList1"
                            :key="index"
                            class="jxhd-item"
                        >
                            <nuxt-link
                                :to="`/cswd/${item.id}.html`"
                                target="_blank"
                            >
                                <div class="title">
                                    {{
                                        item.subtitle
                                            ? item.subtitle
                                            : item.title
                                    }}
                                </div>
                            </nuxt-link>
                            <div class="jxhd-info">
                                <div v-if="item.keyword" class="tags">
                                    <div
                                        v-for="(val, idx) in item.keyword.split(
                                            ','
                                        )"
                                        :key="idx"
                                        class="wt-tags-item"
                                    >
                                        {{ val }}
                                    </div>
                                </div>
                                <div class="time">
                                    <span class="margin-r45">{{
                                        getTime3(item.add_time * 1000)
                                    }}</span>
                                    <span>{{ item.nickname }}解答</span>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div v-if="index == 4" class="ad">
                                <div class="left">
                                    <div class="left1">
                                        快速解决
                                        <span>财税</span>
                                        问题
                                    </div>
                                    <div class="left2">
                                        <div class="avatar">
                                            <img
                                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/assets/img/avatar.png"
                                                alt=""
                                            />
                                        </div>
                                        <div class="avatar">
                                            <img
                                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/assets/img/avatar.png"
                                                alt=""
                                            />
                                        </div>
                                        <div class="avatar">
                                            <img
                                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/assets/img/avatar.png"
                                                alt=""
                                            />
                                        </div>

                                        <div class="zi">
                                            专业老师在线为您答疑解惑
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="right-bototn"
                                    @click="goAsk('/cswd/zjwd/1')"
                                >
                                    立即提问
                                </div>
                            </div>
                        </div>
                    </template>
                    <!-- 精选回答 end -->

                    <!-- 专家问答 -->
                    <template v-if="tabCurent == 'zjwd'">
                        <!-- 专家申请 -->
                        <div class="zjsq">
                            <img
                                class="bj"
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/cswd-zjwd-sqbj.png?t=1"
                                alt=""
                            />
                        </div>
                        <div
                            v-for="(item, index) in problemList2"
                            :key="index"
                            class="zj-item"
                        >
                            <nuxt-link :to="`/cswd/user/${item.user_id}`">
                                <div class="avatar">
                                    <img :src="item.userinfo.avatar" alt="" />
                                    <div
                                        :style="{
                                            background: get_is_online_color(
                                                item.is_online
                                            ),
                                        }"
                                    >
                                        ·&nbsp;{{
                                            get_is_online_text(item.is_online)
                                        }}
                                    </div>
                                </div>
                            </nuxt-link>

                            <div class="info">
                                <nuxt-link :to="`/cswd/user/${item.user_id}`">
                                    <div class="name">
                                        <span>
                                            {{ item.userinfo.nickname }} </span
                                        >&nbsp;&nbsp;
                                        <img
                                            src="~/assets/images/csjh/authentication.png"
                                            alt=""
                                        />
                                        &nbsp;&nbsp;{{ item.major_types }}
                                    </div>
                                </nuxt-link>
                                <div class="tags">
                                    <template
                                        v-if="item.userinfo.major_direction"
                                    >
                                        <div
                                            v-for="tag in item.userinfo.major_direction.split(
                                                ','
                                            )"
                                            :key="tag"
                                            class="tag"
                                        >
                                            {{ tag }}
                                        </div>
                                    </template>
                                </div>
                                <div class="introduce">
                                    {{ item.userinfo.bio }}
                                </div>
                                <div class="money">
                                    <!-- {{ item.major_cost }}小竹叶 -->
                                    全站通会员专享
                                </div>
                            </div>
                            <div @click="goMajor(item)">
                                <div class="button">问专家</div>
                            </div>
                        </div>
                    </template>
                    <!-- 专家问答 end -->
                    <!-- 等你来答 -->
                    <template v-if="tabCurent == 'dnld'">
                        <div
                            v-for="(item, index) in problemList3"
                            :key="index"
                            class="wd-item"
                        >
                            <div class="title-but">
                                <div class="title">
                                    {{ item.title }}
                                </div>
                                <div
                                    v-if="
                                        userInfo &&
                                        item.status == 1 &&
                                        !item.ans_uid
                                    "
                                    class="but3"
                                    @click="goDetail(item)"
                                >
                                    去回答
                                </div>
                                <div
                                    v-else-if="
                                        userInfo &&
                                        item.status == 1 &&
                                        item.ans_uid &&
                                        item.ans_uid == userInfo.id
                                    "
                                    class="but"
                                    @click="goDetail(item)"
                                >
                                    你的问题
                                </div>
                                <div
                                    v-else-if="item.status == 2"
                                    class="but2"
                                    @click="goDetail(item)"
                                >
                                    回答中
                                </div>
                            </div>
                            <div class="name-time">
                                <div class="nickname">
                                    {{ item.nickname }}
                                </div>
                                <div>{{ item.add_time_text }}</div>
                            </div>
                        </div>
                        <div
                            v-if="problemList3.length == 0"
                            class="no-problemList3"
                        >
                            <!-- <el-result
                                v-if="userInfo && userInfo.is_major == 0"
                                title="扫码前往APP成为专业人士"
                                subTitle=""
                            >
                                <template slot="icon">
                                    <el-image
                                        style="width: 300px; height: 300px"
                                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/%E5%AE%89%E5%8D%93%EF%BC%88%E5%BA%94%E7%94%A8%E5%AE%9D%EF%BC%89%E4%B8%8B%E8%BD%BD%E4%BA%8C%E7%BB%B4%E7%A0%81.png"
                                    ></el-image>
                                </template>
                            </el-result> -->
                            <div
                                class="cw-zyrs"
                                v-if="userInfo && userInfo.is_major == 0"
                            >
                                <img
                                    v-for="url in urls"
                                    :key="url"
                                    class="lazy-img"
                                    :src="url"
                                />
                            </div>
                            <el-empty
                                v-if="!userInfo || userInfo.is_major == 1"
                                description="暂无提问"
                            ></el-empty>
                        </div>
                    </template>
                    <!-- 等你来答 end -->

                    <div v-if="getTotal > limit" class="pagination">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="getTotal"
                            :page-size="limit"
                            :current-page.sync="page"
                            @current-change="changePage"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div
                    class="right1"
                    :style="{ backgroundImage: `url(${rightBj1})` }"
                >
                    <div class="title">
                        <img
                            src="~/assets/images/csjh/dnld/right-icon1.png"
                            alt=""
                        />
                        我要问AI
                    </div>
                    <div class="num-show">
                        <!-- <div class="item">
                            {{ count }}个
                            <div>累计解决问题</div>
                        </div>
                        <div class="line"></div> -->
                        <div class="item">
                            24小时
                            <div>在线</div>
                        </div>
                        <div class="line"></div>
                        <div class="item">
                            3秒
                            <div>给答案</div>
                        </div>
                    </div>
                    <!-- <div class="buzhou">
                        <div>提交问题</div>
                        <i class="el-icon-caret-right"></i>
                        <div>老师接单</div>
                        <i class="el-icon-caret-right"></i>
                        <div>获取解答</div>
                    </div> -->
                    <div class="but" @click="goAsk()">立即提问</div>
                </div>

                <div class="right2">
                    <div class="right2-top">
                        <span>财税专家</span>
                        <div @click="sqzjClick">申请专家</div>
                    </div>
                    <div class="zyls-list">
                        <div
                            v-for="(item, index) in majorList"
                            :key="index"
                            class="zyls-item"
                        >
                            <img :src="item.userinfo.avatar" alt="" />
                            <div class="info">
                                <div class="name">
                                    {{ item.userinfo.nickname }}
                                </div>
                                <div class="type">
                                    {{ item.major_types }}
                                </div>
                                <div class="num">
                                    已回答
                                    {{
                                        item.ans_quiz_count
                                            ? item.ans_quiz_count
                                            : 0
                                    }}人
                                </div>
                            </div>
                            <div class="but" @click="goMajor(item)">问专家</div>
                        </div>
                    </div>
                </div>

                <div class="right3">
                    <div class="title">小竹财税小程序</div>
                    <div class="code">
                        <img
                            data-v-7d6e57d9=""
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/gh_c91771a9da09_345.png"
                            alt="微信小程序"
                        />
                        <div>微信扫码 随时随地提问</div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="sbshow" class="sb-showHuoDongModel">
            <div>
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/1306.png"
                    alt=""
                    @click="set_payVipShow(true)"
                />
                <i class="el-icon-close" @click.stop="sbshow = false"></i>
            </div>
        </div>
    </div>
</template>

<script>
import {
    major_list,
    major_select,
    getquizcount_chat,
    getLaizhanList,
    getJhmjList,
    get_major_apply,
} from "@/assets/api/csjhApi";

import { getanalysedata } from "@/assets/api/indexApi";

import { getmessage_count, getCouponList } from "@/assets/api/userCenterApi";
import { mapState, mapMutations } from "vuex";

import { goTopSmooth, getTime3 } from "@/assets/utils/utils";

import rightBj1 from "@/assets/images/csjh/dnld/right-bj1.png";

export default {
    components: {},
    async asyncData({ params }) {
        let data = {
            tabCurent: "jxhd",
            page: 1,
            limit: 20,
            sort: 2,
            majorList: [],
            problemList1: [],
            problemList2: [],
            jxhd_total: 0,
            zjwd_total: 0,
        };
        if (params.tab) data.tabCurent = params.tab;
        if (params.page) data.page = parseInt(params.page.replace(".html", ""));

        // const majorRes = await major_select({});
        // if (majorRes.code == 1) {
        //     data.majorList = majorRes.data;
        // }

        if (data.tabCurent == "jxhd") {
            const res = await getJhmjList({
                limit: data.limit,
                page: data.page,
                sort: data.sort,
            });
            if (res.code == 1) {
                data.problemList1 = res.data;
                if (res.data.length > 0)
                    data.jxhd_total = res.data[0].all_count;
            }
        }
        if (data.tabCurent == "zjwd") {
            const res = await major_list({
                page: data.page,
                pagesize: data.limit,
            });
            if (res.code == 1) {
                data.problemList2 = res.data.data;
                if (res.data.data.length > 0)
                    data.zjwd_total = res.data.allcount;
            }
        }

        return data;
    },
    head() {
        return {
            title: "小竹问答-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问答,财税问答",
                },
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            rightBj1: rightBj1,
            // tabCurent: "jxhd", // jxhd zjwd dnld
            // problemList1: [],
            // problemList2: [],
            problemList3: [],
            // majorList: [],
            // page: 1,
            // limit: 20,
            // jxhd_total: 0,
            // zjwd_total: 0,
            dnld_total: 0,

            count: 0,

            getTime3: getTime3,

            // sort: 2,
            dataLoading: false,

            get_is_online_color: function (is_online) {
                if (is_online == 0) return "#c2c2c2";
                else if (is_online == 1) return "#58c256";
                else if (is_online == 2) return "#ff6161";
            },
            get_is_online_text: function (is_online) {
                if (is_online == 0) return "离线";
                else if (is_online == 1) return "在线";
                else if (is_online == 2) return "忙碌";
            },

            couponList: [],

            urls: [
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/zyrs_1_01.jpg?t=1",
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/zyrs_1_02.jpg",
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/zyrs_1_03.jpg",
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/zyrs_1_05.jpg",
            ],

            sbshow: false,
        };
    },
    created() {},
    mounted() {
        if (this.tabCurent == "cswdcate") {
            this.$router.replace({ path: "/404" });
        }
        goTopSmooth();
        if (this.userInfo && this.userInfo.is_major == 1) {
            this.getmessage_count();
        }

        this.getList();
        this.major_select();
        this.getquizcount_chat();
        let token = localStorage.getItem("token");
        if (token) this.getCouponList();
    },
    watch: {
        // $route: function (to, form) {
        //     try {
        //         this.page = parseInt(to.params.page.replace(".html", ""));
        //         this.tabCurent = to.params.tab.replace(".html", "");
        //         this.getList();
        //     } catch (error) {}
        // },
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            messageCount: (state) => state.messageCount,
        }),

        getTotal: function () {
            if (this.tabCurent == "jxhd") return this.jxhd_total;
            if (this.tabCurent == "zjwd") return this.zjwd_total;
            if (this.tabCurent == "dnld") return this.dnld_total;
            return 0;
        },
    },
    methods: {
        ...mapMutations("common", [
            "setloginShow",
            "setmenuIndex",
            "set_messageCount",
            "set_payVipShow",
        ]),

        // 获取数据
        getList() {
            goTopSmooth();
            let params = {
                m_id: 4,
                type: 1,
                describe: "精选回答",
                code: "PC2",
            };
            if (this.tabCurent == "jxhd") {
                // this.getJhmjList();
                params.describe = "精选回答";
                params.code = "PC6";
            }
            if (this.tabCurent == "zjwd") {
                // this.getZjwd();
                params.describe = "专家问答";
                params.code = "PC3";
            }
            if (this.tabCurent == "dnld") {
                this.getLaizhanList();
                params.describe = "等你来答";
                params.code = "PC5";
            }
            getanalysedata(params);
        },

        // 精选回答
        async getJhmjList() {
            this.dataLoading = true;
            const res = await getJhmjList({
                limit: this.limit,
                page: this.page,
                sort: this.sort,
            });
            this.dataLoading = false;
            if (res.code == 1) {
                this.problemList1 = res.data;
                if (res.data.length > 0)
                    this.jxhd_total = res.data[0].all_count;
            }
        },

        // 专家问答
        async getZjwd() {
            this.dataLoading = true;
            const res = await major_list({
                page: this.page,
                pagesize: this.limit,
            });
            this.dataLoading = false;
            if (res.code == 1) {
                this.problemList2 = res.data.data;
                if (res.data.data.length > 0)
                    this.zjwd_total = res.data.allcount;
            }
        },

        // 等你来战
        async getLaizhanList() {
            this.dataLoading = true;
            const res = await getLaizhanList({
                page: this.page,
                sort: 0,
                limit: this.limit,
            });
            this.dataLoading = false;
            let token = localStorage.getItem("token");
            if (!token) {
                this.$confirm("需要登录后提问", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        window.localStorage.removeItem("token");
                        window.localStorage.removeItem("userInfo");
                        window.location.href =
                            "/login?url=" +
                            window.location.pathname +
                            window.location.search;
                    })
                    .catch(() => {});
                return;
            }
            if (res.code == 1) {
                this.problemList3 = res.data;
                if (res.data.length > 0)
                    this.dnld_total = res.data[0].all_count;
                else this.dnld_total = 0;
                if (this.userInfo && this.userInfo.is_major == 1) {
                    this.getmessage_count();
                }
            }
        },

        // 获取未读消息
        async getmessage_count() {
            const res = await getmessage_count({});
            if (res.code == 1) {
                this.set_messageCount(res.data);
            }
        },

        changePage(page) {
            this.$router.push({
                path: `/cswd/${this.tabCurent}/${page}`,
            });
            // this.page = page;
            // this.getList();
        },

        // 切换tabs
        tabClick(index) {
            this.tabCurent = index;
            this.$router.push({
                name: "CswdProblem",
                params: {
                    tab: `${index}`,
                },
            });
        },

        // 切换最新 推荐
        sortClick(sort) {
            this.sort = sort;
            this.page = 1;
            this.getJhmjList();
        },

        // 精选老师
        async major_select() {
            if (sessionStorage.getItem("major_select"))
                this.majorList = JSON.parse(
                    sessionStorage.getItem("major_select")
                );
            else {
                const res = await major_select({});
                if (res.code == 1) {
                    sessionStorage.setItem(
                        "major_select",
                        JSON.stringify(res.data)
                    );
                    this.majorList = res.data;
                }
            }
        },

        // 获取累计解决问题数
        async getquizcount_chat() {
            if (sessionStorage.getItem("getquizcount_chat"))
                this.count = sessionStorage.getItem("getquizcount_chat");
            else {
                const res = await getquizcount_chat({});
                if (res.code == 1) {
                    sessionStorage.setItem("getquizcount_chat", res.data);
                    this.count = res.data;
                }
            }
        },

        //进详情
        goDetail(item) {
            if (!this.userInfo) {
                this.$message({
                    message: "请登录",
                    type: "warning",
                });
                return;
            }
            if (item.ans_uid) {
                if (item.ans_uid == this.userInfo.id)
                    this.$router.push({
                        path: `/chat/${item.id}`,
                    });
                else
                    this.$message({
                        message: "不是您的问题",
                        type: "warning",
                    });
                return;
            }

            if (this.userInfo.is_major == 1 || item.uid == this.userInfo.id) {
                this.$router.push({
                    path: `/chat/${item.id}`,
                });
            } else {
                this.$message({
                    message:
                        "您目前不是专业人士，无法回答问题。请前往小竹财税APP申请成为专业人士",
                    type: "warning",
                });
            }
        },

        // 点击申请专家
        sqzjClick() {
            this.$alert("申请专业人士请前往小竹财税app", "提示", {
                confirmButtonText: "确定",
            });
        },

        // 点击专家提问
        goMajor(item) {
            if (!this.userInfo) {
                this.$confirm("需要登录后提问", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        window.localStorage.removeItem("token");
                        window.localStorage.removeItem("userInfo");
                        window.location.href =
                            "/login?url=" +
                            window.location.pathname +
                            window.location.search;
                    })
                    .catch(() => {});
                return;
            }
            if (this.userInfo.is_gpt_vip == 0 && this.couponList.length == 0) {
                this.$confirm(
                    " 该功能为会员专享，非会员可查阅精选问题",
                    "提示",
                    {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "开通会员",
                        cancelButtonText: "去查询",
                    }
                )
                    .then(() => {
                        this.set_payVipShow(true);
                    })
                    .catch((action) => {
                        if (action === "cancel") {
                            this.$router.push({
                                path: "/cswd/jxhd/1",
                            });
                        }
                    });
                // this.sbshow = true
                return;
            }
            if (item.is_online == 0) {
                this.$confirm("当前老师不在线，是否继续提问", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "继续提问",
                    cancelButtonText: "取消",
                })
                    .then(() => {
                        this.$router.push({
                            path: `/cswd/ask?id=${item.user_id}`,
                        });
                    })
                    .catch((action) => {});
            } else if (item.is_online == 2) {
                this.$confirm("当前老师忙碌中，是否继续提问", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "继续提问",
                    cancelButtonText: "取消",
                })
                    .then(() => {
                        this.$router.push({
                            path: `/cswd/ask?id=${item.user_id}`,
                        });
                    })
                    .catch((action) => {});
            } else {
                this.$router.push({
                    path: `/cswd/ask?id=${item.user_id}`,
                });
            }
        },

        async getCouponList() {
            const res = await getCouponList({
                status: 0,
                is_effective: 1,
            });
            if (res.code == 1) {
                this.couponList = res.data.list;
            }
        },

        goAsk(path = "/chatgpt/xzcsgpt") {
            if (this.userInfo) {
                this.$router.push({
                    path: path,
                });
            } else
                this.$confirm("需要登录后提问", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        window.localStorage.removeItem("token");
                        window.localStorage.removeItem("userInfo");
                        window.location.href =
                            "/login?url=" +
                            window.location.pathname +
                            window.location.search;
                    })
                    .catch(() => {});
        },
    },
};
</script>


<style lang="scss" scoped>
.cswd-dnld {
}
.main {
    width: 1200px;
    margin: 0 auto;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    .main-left {
        width: 800px;
        background: #ffffff;
        border-radius: 10px;
    }
    .main-right {
    }
}

.tabs {
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    .tab {
        cursor: pointer;
        height: 95px;
        margin: 0 30px;
        font-size: 24px;
        color: #999999;
        line-height: 95px;
        text-align: center;
        position: relative;
        .line {
            display: none;
            width: 35px;
            height: 5px;
            background: #ff6900;
            border-radius: 5px;
            position: absolute;
            bottom: 0;
            left: calc(50% - 17.5px);
        }

        .mark {
            min-width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            padding: 0 4px;
            border-radius: 16px;
            background: #fa5151;
            font-size: 12px;
            font-weight: 500;
            color: #ffffff;
            position: absolute;
            top: 25px;
            right: -15px;
        }
    }

    .tab-active {
        font-weight: 500;
        color: #333333;
        .line {
            display: block;
        }
    }
}

.wd-list {
    padding: 0 30px;
}

.wd-item {
    padding: 32px 0 30px 0;
    border-bottom: 1px solid #eaeaea;

    .title-but {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
            min-width: 573px;
            overflow: hidden;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            font-size: 18px;
            color: #333333;
            line-height: 32px;
            cursor: pointer;
            &:hover {
                text-decoration: underline;
                color: #fa6815 !important;
            }
        }
        .but {
            width: 100px;
            min-width: 100px;
            height: 38px;
            background: linear-gradient(90deg, #ff6317 0%, #ff8628 100%);
            border-radius: 65px;
            font-size: 16px;
            color: #ffffff;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
            &:hover {
                opacity: 0.8;
            }
        }
        .but2 {
            width: 100px;
            min-width: 100px;
            height: 38px;
            background: #f7f7f7;
            border-radius: 65px;
            font-size: 16px;
            color: #777777;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
            &:hover {
                opacity: 0.8;
            }
        }
        .but3 {
            width: 98px;
            min-width: 98px;
            height: 36px;
            border: 1px solid #333333;
            border-radius: 65px;
            font-size: 16px;
            color: #333333;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            &:hover {
                background: linear-gradient(90deg, #ff6317 0%, #ff8628 100%);
                color: #ffffff;
                border-color: transparent;
            }
        }
    }
    .name-time {
        display: flex;
        align-items: center;
        margin-top: 20px;
        .nickname {
            width: 165px;
        }
        div {
            font-size: 14px;
            color: #9e9e9e;
        }
    }
}

.right1 {
    position: sticky;
    z-index: 10;
    top: 97px;
    width: 380px;
    height: 268px;
    border-radius: 10px;
    padding-top: 34px;
    box-sizing: border-box;
    .title {
        font-size: 28px;
        color: #ff6116;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 40px;
            height: 40px;
            margin-right: 11px;
            position: relative;
            top: 3px;
        }
    }

    .num-show {
        margin-top: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        .item {
            width: 115px;
            text-align: center;
            font-size: 24px;
            font-weight: 500;
            color: #333333;
            div {
                font-size: 14px;
                font-weight: 400;
                color: #999999;
            }
        }
        .line {
            height: 43px;
            width: 1px;
            background-color: #d8d8d8;
        }
    }

    .buzhou {
        margin-top: 37px;
        padding: 0 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        div {
            font-size: 16px;
            color: #333333;
        }
        i {
            color: #cea579;
            font-size: 17px;
        }
    }
    .but {
        width: 313px;
        height: 58px;
        background: linear-gradient(90deg, #ff6116 0%, #ff8729 100%);
        border-radius: 50px;
        font-size: 22px;
        color: #ffffff;
        line-height: 58px;
        text-align: center;
        cursor: pointer;
        margin: 0 auto;
        margin-top: 30px;
        &:hover {
            opacity: 0.8;
        }
    }
}

.right2 {
    width: 380px;
    background: #ffffff;
    border-radius: 10px;
    margin-top: 18px;
    .right2-top {
        height: 95px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px 0 36px;
        border-bottom: 1px solid #ededed;

        span {
            font-size: 28px;
            color: #333333;
        }
        div {
            cursor: pointer;
            width: 93px;
            height: 32px;
            background: #ededed;
            border-radius: 50px;
            font-size: 16px;
            color: #666666;
            line-height: 32px;
            text-align: center;
            &:hover {
                background: #fff0e9;
                color: #e36225;
            }
        }
    }

    .zyls-list {
        padding: 0 25px;
    }
    .zyls-item {
        border-bottom: 1px solid #eaeaea;
        padding: 30px 0;
        display: flex;
        align-items: center;
        position: relative;
        img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            object-fit: cover;
        }
        .info {
            padding-left: 25px;
            .name {
                font-size: 18px;
                font-weight: 500;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 155px;
            }
            .type {
                font-size: 14px;
                color: #666666;
                padding: 9px 0;
            }
            .num {
                font-size: 14px;
                color: #999999;
            }
        }
        .but {
            position: absolute;
            right: 0;
            top: 33px;
            width: 77px;
            height: 30px;
            border-radius: 50px;
            border: 1px solid #333333;
            font-size: 14px;
            color: #333333;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            &:hover {
                background: #ff8025;
                border-color: #ff8025;
                color: #ffffff;
            }
        }
    }
}

.hot-tags {
    margin-top: 18px;
    background-color: #fff;
    border-radius: 10px;
    padding: 24px 25px;
    .title {
        font-size: 28px;
        color: #333;
        font-weight: 500;
    }
    .tags {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        .tags-item {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-bottom: 20px;
            min-width: 30px;
            padding: 2px 10px;
            height: 26px;
            background-color: #f6f6f6;
            color: #333;
            font-size: 12px;
            border-radius: 75px;
            margin-right: 8px;
            &:hover {
                color: #1772f6;
                background-color: #e7f1fe;
            }
        }
    }
}

.right3 {
    width: 380px;
    background: #ffffff;
    border-radius: 10px;
    margin-top: 19px;
    .title {
        height: 80px;
        line-height: 80px;
        padding-left: 40px;
        border-bottom: 1px solid #ededed;
        font-size: 28px;
    }
    .code {
        text-align: center;
        padding: 30px 0;
        img {
            width: 200px;
            height: 200px;
        }
        div {
            padding-top: 25px;
            font-size: 20px;
            color: #666666;
        }
    }
}

.zjsq {
    width: 100%;
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 37px;
    .bj {
        width: 100%;
        height: 150px;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    div {
        position: relative;
        z-index: 10;
    }
    .zjsq-text {
        padding-left: 185px;
        font-size: 24px;
        font-weight: 400;
        color: #897965;
        div {
            font-size: 32px;
            font-weight: 500;
            color: #695134;
        }
        span {
            padding: 0 5px;
        }
    }
    .but {
        width: 137px;
        height: 49px;
        line-height: 49px;
        text-align: center;
        background: linear-gradient(90deg, #c0966d 0%, #d4a970 100%);
        border-radius: 75px;
        font-size: 16px;
        color: #ffffff;
        cursor: pointer;
        margin-left: 50px;
        &:hover {
            opacity: 0.8;
        }
    }
}

.zj-item {
    border-bottom: 1px solid #e8e8e8;
    padding: 40px 0;
    display: flex;
    align-items: center;
    position: relative;
    .avatar {
        position: relative;
        div {
            width: 49px;
            height: 19px;
            line-height: 19px;
            text-align: center;
            font-size: 12px;
            color: #ffffff;
            border-radius: 19px;
            position: absolute;
            right: 8px;
            bottom: 9px;
        }
        img {
            width: 180px;
            height: 180px;
            object-fit: cover;
        }
    }

    .info {
        padding-left: 30px;
        .name {
            line-height: 26px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            display: flex;
            align-items: center;
            span {
                font-size: 20px;
                font-weight: 500;
                color: #333333;
            }
            img {
                height: 18px;
                width: auto;
            }
        }
        .tags {
            margin: 15px 0;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            max-height: 32px;
            overflow: hidden;
            .tag {
                margin-bottom: 7px;
                padding: 0 6px;
                height: 25px;
                background: #f9e9d9;
                border-radius: 4px;
                line-height: 25px;
                text-align: center;
                font-size: 14px;
                color: #333333;
                margin-right: 10px;
            }
        }
        .introduce {
            font-size: 14px;
            color: #9e9e9e;
            white-space: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2; /* 可以限制显示的行数，这里为2行 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            line-height: 24px;
            height: 48px;
        }
        .money {
            font-size: 14px;
            font-weight: 500;
            color: #fa5151;
            padding-top: 20px;
        }
    }

    .button {
        width: 100px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-radius: 65px;
        border: 1px solid #333333;
        font-size: 16px;
        color: #333333;
        position: absolute;
        right: 8px;
        top: 36px;
        cursor: pointer;
        &:hover {
            background: #ff8025;
            border-color: #ff8025;
            color: #ffffff;
        }
    }

    &:hover {
        .name {
            span {
                color: #ff6f1d;
                text-decoration: underline;
            }
        }
    }
}

.jxhd-item {
    padding-top: 34px;
    .title {
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2; /* 可以限制显示的行数，这里为2行 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        font-size: 18px;
        color: #333333;
        line-height: 32px;
        &:hover {
            color: #fa6815;
            text-decoration: underline;
        }
    }
    .jxhd-info {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #9e9e9e;
        margin-top: 20px;
        justify-content: space-between;
        width: 100%;
        .tags {
            display: flex;
            flex-wrap: wrap;
            .wt-tags-item {
                display: flex;
                align-items: center;
                justify-content: center;
                // cursor: pointer;
                min-width: 30px;
                padding: 2px 10px;
                height: 26px;
                background-color: #f6f6f6;
                color: #666;
                font-size: 12px;
                border-radius: 75px;
                margin-right: 8px;
                // &:hover {
                //     color: #1772F6;
                //     background-color: #E7F1FE;
                // }
            }
        }
        .form {
            min-width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .time {
            flex: 1;
            display: flex;
            justify-content: flex-end;
        }
        .num {
            width: 100%;
        }
        .teacher {
            min-width: 200px;
            text-align: right;
        }
    }
    .line {
        width: 100%;
        height: 1px;
        background-color: #eaeaea;
        margin-top: 30px;
    }
}

.ad {
    height: 150px;
    background: #f5f6f8;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 37px;
    padding-right: 34px;
    .left {
        .left1 {
            font-size: 32px;
            color: #333333;
            span {
                color: #ff691a;
                padding: 0 5px;
            }
        }
        .left2 {
            padding-top: 12px;
            display: flex;
            align-items: center;
            .avatar {
                width: 16px;
                height: 24px;
            }
            img {
                width: 25px;
                height: 25px;
                border: 1px solid #ffffff;
                border-radius: 25px;
                display: block;
            }
            .zi {
                font-size: 24px;
                color: #666666;
                padding-left: 25px;
            }
        }
    }
    .right-bototn {
        width: 156px;
        height: 58px;
        line-height: 58px;
        text-align: center;
        cursor: pointer;
        background: linear-gradient(90deg, #ff6116 0%, #ff8729 100%);
        border-radius: 50px;
        font-size: 22px;
        color: #ffffff;
        &:hover {
            opacity: 0.8;
        }
    }
}

.sort-list {
    display: flex;
    align-items: center;
    padding: 35px 0 0 0;
    div {
        width: 73px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: #f6f6f6;
        border-radius: 5px;
        font-size: 14px;
        color: #666666;
        margin-right: 13px;
        cursor: pointer;
    }
    .sort {
        background: #fff4ec;
        color: #ff6900;
    }
}

.margin-r45 {
    margin-right: 45px;
}

.no-problemList3 {
    text-align: center;
    padding: 20px 0;

    .cw-zyrs {
        .lazy-img {
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
        }
    }
}
.pagination {
    text-align: center;
    padding: 30px;
}

.sb-showHuoDongModel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    > div {
        position: relative;
        cursor: pointer;
        i {
            color: #ffffff;
            font-size: 34px;
            position: absolute;
            top: 18px;
            right: 15px;
        }
    }
    img {
        width: 387px;
        height: auto;
    }
}
</style>
